<template>
	<div class="popoverbor">

		<image :src="imgSrc" @click="showPopover" class="medal" mode=""></image>
		<transition class="transitions" name="fade">
			<div v-if="isPopoverVisible" class="popover">
				<div class="popover-content" :style="{ color: textColor }">
					{{ popoverContent }}
				</div>
				<div class="popover-arrow"></div>
			</div>
		</transition>
		<!-- <button @click="showPopover" class="trigger-button">{{ triggerText }}</button> -->

	</div>
</template>

<script setup>
	import {
		ref,
		onUnmounted
	} from 'vue';

	const props = defineProps({
		imgSrc: {
			type: String,
			default: ''
		},
		popoverContent: {
			type: String,
			default: ''
		},
		textColor: {
			type: String,
			default: ''
		}
	});

	const isPopoverVisible = ref(false);
	let timer = null;

	const showPopover = () => {
		isPopoverVisible.value = true;
		clearTimeout(timer);
		timer = setTimeout(() => {
			isPopoverVisible.value = false;
		}, 1500);
	};

	onUnmounted(() => {
		clearTimeout(timer);
	});
</script>

<style scoped>
	.popoverbor {
		position: relative;
		display: flex;
		justify-content: center;
	}

	.medal {
		width: 40rpx;
		height: 40rpx;
		margin: 0 5rpx 0 15rpx;
	}

	.transitions {
		position: absolute;
		top: -1.7rem;
		left: -30rpx;
	}

	.trigger-button {
		background-color: #007BFF;
		color: white;
		border: none;
		padding: 8rpx 16rpx;
		border-radius: 4rpx;
		cursor: pointer;
		transition: background-color 0.3s ease;

	}

	.trigger-button:hover {
		background-color: #0056b3;
	}

	.popover {
		z-index: 1000;
		background-color: white;
		border: 1rpx solid #e2e8f0;
		padding: 5rpx;
		border-radius: 8rpx;
		box-shadow: 0 8rpx 68rpx -1rpx rgba(0, 0, 0, 0.1), 0 2rpx 4rpx -1rpx rgba(0, 0, 0, 0.06);
		min-width: 120rpx;
		text-align: center;
	}

	.popover-content {
		font-weight: bold;
		font-size: 23rpx;
	}

	.popover-arrow {
		position: absolute;
		width: 0;
		height: 0;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-top: 8rpx solid white;
		bottom: -8rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s ease;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
</style>